<template>
	<div class="container">
		<div class="header">
			<router-link to="/category">
				<i class="iconfont icon-back"></i>
			</router-link>
			<input type="text" placeholder="请输入搜索关键字" ref="input">
			<button @click="search.name=$refs.input.value.trim()"><i class="iconfont icon-search"></i>
			</button>
		</div>
		<div class="order">
			<div class="order-item" :class="{active:search.orderCol==='price'}"
			     @click="changeOrder('price')">
				<span>价格</span>
				<i class="iconfont icon-asc" v-show="search.orderDir==='asc'"></i>
				<i class="iconfont icon-desc" v-show="search.orderDir==='desc'"></i>
			</div>
			<div class="order-item" :class="{active:search.orderCol==='sale'}" @click="changeOrder('sale')">
				<span>销量</span>
				<i class="iconfont icon-asc" v-show="search.orderDir==='asc'"></i>
				<i class="iconfont icon-desc" v-show="search.orderDir==='desc'"></i>
			</div>
			<div class="order-item" :class="{active:search.orderCol==='rate'}" @click="changeOrder('rate')">
				<span>好评</span>
				<i class="iconfont icon-asc" v-show="search.orderDir==='asc'"></i>
				<i class="iconfont icon-desc" v-show="search.orderDir==='desc'"></i>
			</div>
		</div>
		<div class="content">
			<ul ref="list">
				<li v-for="item in list" :key="item.id">
						<div class="avatar" @click="detail(item.id)">
							<img :src="item.avatar" alt="">
						</div>
						<div class="content-list">
							<h4>{{item.name}}</h4>
							<p>{{item.brief}}</p>
							<p class="price">{{item.price}}</p>
							<p>好评：{{item.rate}}</p>
							<p>销量：{{item.sale}}</p>
						</div>
				</li>
			</ul>
			<p class="tip" ref="tip" v-text="tip"></p>
		</div>
	</div>
</template>
<script>
        import imagesloaded from 'imagesloaded'
        import {ProductApi} from '../../api'

        export default {
                name: "List",
                data(){
                        return {
                                search: {
                                        name: "",
                                        cid:parseInt(this.$route.params.params),
                                        orderCol: "price",
                                        orderDir: "asc",
                                        begin: 0,
                                        pageSize: 6
                                },
                                list: [],
                                hasMore: true,
                                isLoading: false,
                        };
                },
                methods: {
	                async getData(isLoadMore){
                                try{
                                        this.isLoading=true;
                                        const result=await ProductApi.getList(isLoadMore?Object.assign({}, this.search, {begin: this.list.length}):this.search)
	                                await new Promise(resolve => setTimeout(() => resolve(result), 1000));
                                        this.hasMore = result.length === this.search.pageSize;
                                        this.list = isLoadMore?this.list.concat(result):result;
                                        this.isLoading = false;
                                }catch(e) {/**/}

                        },
	                detail(id){
	                        const cid=id;
	                        this.$router.push( {path: `/detail/${cid}`});
	                },
                        changeOrder(col){
                                if(col === this.search.orderCol)
                                        this.search.orderDir = this.search.orderDir === "asc"?"desc":"asc";
                                else
                                        this.search.orderCol = col;
                                this.getData();
                        }
                },
                computed: {
                        tip(){
                                if(this.isLoading)
                                        return "加载中..";
                                else if(this.list.length === 0)
                                        return "暂无相关商品，敬请期待";
                                else if(this.hasMore)
                                        return "上拉加载更多";
                                else
                                        return "已到达底部"
                        }
                },
                watch: {
                        search: {
                                handler(){
                                        if(this.io) this.io.unobserve(this.$refs.tip);
                                        this.list = [];
                                        this.getData(false);
                                },
                                immediate: true,
                                deep: true,
                        },
                        list: function(newValue){
                                if(newValue.length === 0) return;
                                if(!this.hasMore) return;
                                this.$nextTick(function(){
                                        imagesloaded(this.$refs.list, () =>{
                                                this.io.observe(this.$refs.tip);
                                        });
                                });
                        }
                },
                mounted(){
                        this.io = new IntersectionObserver(
                                arr =>{
                                        if(arr[0].isIntersecting){
                                                this.io.unobserve(this.$refs.tip);
                                                this.getData(true);
                                        }
                                },
                                {root: null, threshold: [0.9]}
                        );
                },
                destroyed(){
                        this.io.disconnect();
                }
        }
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		flex-shrink: 0;
		height: 50px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.header input {
		width: 240px;
		box-sizing: border-box;
		border: 1px solid red;
		padding: 15px;
		border-radius: 15px;
		height: 30px;
		align-self: center;
	}

	.header button {
		border: 0;
		background-color: white;
	}

	.content {
		overflow: auto;
	}

	.content ul {
		display: flex;
		flex-direction: column;

	}

	.content li {
		display: flex;
		align-items: center;
		padding: 12px;
	}

	.content a {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 126px;
		height: 126px;
		flex-shrink: 0;
	}

	.avatar img {
		width: 100%;
	}

	.content-list h4 {
		color: rgb(51, 51, 51);
		font-size: 14px;
		line-height: 19px;
	}

	.content-list p {
		color: rgb(136, 136, 136);
		font-size: 10px;
	}

	.content-list > .price {
		color: rgb(248, 36, 0);
		font-size: 16px;
	}

	.content-list > .price::before {
		content: "￥";
		color: red;
		font-size: 12px;
	}

	.tip {
		height: 100px;
	}

	.order {
		flex-shrink: 0;
		height: 40px;
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid black;
	}

	.order-item {
		display: flex;
		align-items: center;
	}

	.order-item.active {
		color: red;
	}

	.order-item span {
		font-size: 14px;
	}

	.order-item i {
		font-size: 18px;
	}

	.content {
		flex-grow: 1;
	}
	.iconfont{
		font-size:23px;
	}
</style>